<script>
 
    let count = 0;
    let name = "Svelte";
    let expression = "<h1>html</h1>";
    let fillings = [];
    let active = false;
    let visible = false;
    let user = {
        firstname: "Ada",
        lastname: "Lovelace",
    };
    let fade = function () {
        return {
            duration: 2000,
        };
    };
    function addCount() {
        count += 1;
        console.log(count % 2);
        visible = count % 2 ? true : false;
    }
    // 异步渲染，必须是里面的逻辑执行完成后才会渲染
    let promise = new Promise((resolve, inject) => {
        if (count == 1) {
            resolve(count);
        } else {
            inject(count);
        }
    });
    //
    let action = (bar) => {
        return {
            update(bar) {
                // `bar` 已发生变更
                // 在页面中点击第一个数字控制台会输出updata
                console.log("updata");
            },
            destroy() {
                // node已从DOM中移除
                console.log("destroy");
            },
        };
    };
    // 引入组件
    import comp from "@/components/comp.svelte";
</script>

<!-- 事件绑定 -->
<h1 on:click={addCount}>{count}</h1>
<!-- 属性绑定（自带双向数据绑定） -->
<input bind:value={name} />
{name}

<!-- 组绑定 所选绑定 -->
<input type="checkbox" bind:group={fillings} value="Rice" />
<input type="checkbox" bind:group={fillings} value="Beans" />
<input type="checkbox" bind:group={fillings} value="Cheese" />
<input type="checkbox" bind:group={fillings} value="Guac (extra)" />
{fillings}

<!-- class -->
<div class={active ? "active" : ""}>active</div>
<!-- use:action 主要监听内容变化 -->

<div use:action={count}>use:action主要监听的是count的变化</div>
<!-- transition -->
<!-- in淡入 out淡出 -->
{#if visible}
    <div  out:fade>flies in, fades out</div>
{/if}

<!-- animate -->
{#each ['1','2','3'] as item, index (item)}
{item}
	<!-- <div animate:whizz>{item}</div> -->
{/each}


{#if visible}
    <div transition:fade={{ duration: 2000 }}>
        flies in, fades out over two seconds
    </div>
{/if}

<!-- 连接 -->
<a href="#/lorem/2">Link</a>
<!-- 标签 -->
<svelte:head>
    <!-- 会将其内容放到html的header中去 -->
    <!-- <link rel="stylesheet" href="@/"> -->
</svelte:head>

<!-- 动态组件类似于vue中的 <componet is="..."> -->
<svelte:component this={comp} />

<!-- svelte:self标签允许component递归自身，也就是说利用插槽或者是在自身组件中去调用自身，还可以说是递归组件 -->

<!-- 注释语句 类似于v-if -->
{#if count > 2}
    <p>count>2</p>
{/if}
<!-- 遍历 -->
<ul>
    {#each ["1", "2", "3"] as item}
        <li>{item}</li>
    {/each}
</ul>
<!-- 异步渲染 -->

{#await promise}
    <!-- promise 状态是“未决” -->
    <p>waiting for the promise to resolve...</p>
{:then value}
    <!-- promise 状态是 “完成” -->
    <p>The value is {value}</p>
{:catch error}
    <!-- promise 状态是“被拒绝” -->
    <p>Something went wrong: {error}</p>
{/await}
<!-- html内容插入 -->
{@html expression}

<!-- debug  当代码执行到改语句的时候会暂停执行 -->
<!-- {@debug user} -->

<h1>Hello {user.firstname}!</h1>

<style>
    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }
</style>
